<!--
 * @Author: your name
 * @Date: 2020-12-18 09:40:16
 * @LastEditTime: 2020-12-29 16:13:30
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \i2 超炫Echart物流大数据展示系统1-4页面\i2-2 物流数据概况系统\index.html
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>数据概况</title>
    <link rel="stylesheet" href="css/wodry.css" />
    <link rel="stylesheet" href="css/survey.css" />
    <link rel="stylesheet" href="css/public.css" />
    <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <script>
      $(function () {
        $(".myscroll").myScroll({
          speed: 60, //数值越大，速度越慢
          rowHeight: 38, //li的高度
        });

        //自动轮播
        var timer = setInterval(autoPlay, 3000);

        function autoPlay() {
          var $bannerUl = $("#banner ul"),
            $bannerLi = $("#banner ul li");
          //动态获取ul的宽度
          $bannerUl.css("width", $bannerLi.width() * $bannerLi.length);
          $bannerUl.animate(
            {
              marginLeft: -$bannerLi.width(),
            },
            500,
            function () {
              $(this)
                .animate(
                  {
                    marginLeft: 0,
                  },
                  0
                )
                .find("li")
                .eq(0)
                .appendTo($(this));
              //把每次移动后的第一个li放到ul的最后面
              /*
               * 由于把第一个li放到ul的最后面，就会把第二个li挤到第一个li的位置，但是我们又需要显示第二个li，
               * 所以需要移动回原点，但是这个移动过程不能被看到，所以执行时间是0
               */
            }
          );
        }

        // 清除和设置定时器
        $("#banner").mouseover(function () {
          clearInterval(timer);
        });

        $("#banner").mouseout(function () {
          timer = setInterval(autoPlay, 3000);
        });
      });

      $(document).ready(function () {
        var whei = $(window).width();
        $("html").css({
          fontSize: whei / 22,
        });
        $(window).resize(function () {
          var whei = $(window).width();
          $("html").css({
            fontSize: whei / 22,
          });
        });
      });
    </script>
  </head>

  <body>
    <div class="main">
      <div class="header">
        <div class="header-left fl" id="time"></div>
        <div class="header-center fl">
          <div class="header-title">物流数据概况</div>
          <div class="header-img"></div>
        </div>
        <div class="header-right fl"></div>
        <div class="header-bottom fl"></div>
      </div>
      <div class="center">
        <div class="center-left fl">
          <div class="left-top rightTop border">
            <div class="title">基本信息</div>
            <div class="top-list">
              <span>
                <b class="counter" id="countyCount">1</b>
                <p>县服务中心</p>
              </span>
              <span>
                <b class="counter" id="townCount">19</b>
                <p>乡镇服务站</p>
              </span>
              <span>
                <b class="counter" id="villageCount">290</b>
                <p>村服务部</p>
              </span>
              <span class="last">
                <b class="counter" id="userCount">2180</b>
                <p>三级服务体系人员</p>
              </span>
            </div>
          </div>
          <div class="left-cen rightTop border">
            <div class="title">店铺销售情况</div>
            <div id="banner" class="banner">
              <ul>
                <li>
                  <div class="list clearfix">
                    <div class="listTxt">
                      <p>商店名称：<span>华为旗舰店</span></p>
                      <p>销售金额：<span>5000万</span></p>
                      <p>所售商品：<span>电子产品、手机、电脑</span></p>
                      <p>店铺地区：<span>全国 </span></p>
                      <p>销售时间：<span>2020-11-11</span></p>
                    </div>
                    <div class="listImg">
                      <img src="./images/touxiang.png" />
                    </div>
                  </div>
                </li>
                <li>
                  <div class="list clearfix">
                    <div class="listTxt">
                      <p>商店名称：<span>小米旗舰店</span></p>
                      <p>销售金额：<span>4000万</span></p>
                      <p>所售商品：<span>电子产品</span></p>
                      <p>店铺地区：<span>全国 </span></p>
                      <p>销售时间：<span>2020-11-11</span></p>
                    </div>
                    <div class="listImg">
                      <img src="./images/touxiang.png" />
                    </div>
                  </div>
                </li>
                <li>
                  <div class="list clearfix">
                    <div class="listTxt">
                      <p>商店名称：<span>vivo旗舰店</span></p>
                      <p>销售金额：<span>3500万</span></p>
                      <p>所售商品：<span>电子产品</span></p>
                      <p>店铺地区：<span>全国 </span></p>
                      <p>销售时间：<span>2020-11-11</span></p>
                    </div>
                    <div class="listImg">
                      <img src="./images/touxiang.png" />
                    </div>
                  </div>
                </li>
                <li>
                  <div class="list clearfix">
                    <div class="listTxt">
                      <p>商店名称：<span>OPPO旗舰店</span></p>
                      <p>销售金额：<span>3000万</span></p>
                      <p>所售商品：<span>电子产品</span></p>
                      <p>店铺地区：<span>全国 </span></p>
                      <p>销售时间：<span>2020-11-11</span></p>
                    </div>
                    <div class="listImg">
                      <img src="./images/touxiang.png" />
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <div class="left-bottom rightTop border">
            <div class="title">商品分类占比</div>
            <div class="bottom-b">
              <div id="chart3" class="allnav"></div>
            </div>
          </div>
          <div
            class="left-top rightTop border"
            style="margin-bottom: 0px !important"
          >
            <div class="title">基本信息</div>
            <div class="top-list">
              <span>
                <b class="counter">1</b>
                <p>县服务中心</p>
              </span>
              <span>
                <b class="counter">19</b>
                <p>乡镇服务站</p>
              </span>
              <span>
                <b class="counter">290</b>
                <p>村服务部</p>
              </span>
              <span class="last">
                <b class="counter">2180</b>
                <p>三级服务体系人员</p>
              </span>
            </div>
          </div>
        </div>
        <div class="center-cen fl">
          <div class="cen-top">
            <div class="top-title">
              <ul>
                <li>
                  <p>数量统计</p>
                  <span>3</span>
                  <span>6</span>
                  <span>5</span>
                  <b>个</b>
                </li>
                <li>
                  <p>同比上升</p>
                  <span>1</span>
                  <span>3</span>
                  <b>%</b>
                </li>
              </ul>
            </div>
            <div class="top-bottom">
              <div id="diqu" class="allnav" style="height: 4.4rem"></div>
            </div>
          </div>
          <div class="cen-bottom rightTop border">
            <div class="title">订单情况</div>
            <div class="bottom-b">
              <div id="chart4" class="allnav"></div>
            </div>
          </div>
        </div>
        <div class="center-right fr">
          <div class="right-top rightTop border">
            <div class="title">各年龄段占比</div>
            <div class="right-top-cent">
              <div id="shuiipin" class="allnav"></div>
            </div>
          </div>
          <div class="right-cen border">
            <div class="title">平台占比</div>
            <div class="right-cen-cent">
              <div id="chart2" class="allnav"></div>
            </div>
          </div>
          <div class="right-bottom rightTop border">
            <div class="title">全球贸易国家城市排行</div>
            <div class="chat">
              <div id="chart5" class="allnav"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="popup">
      <a href="javascript:;" class="popupClose"></a>
      <div class="summary">
        <div class="summaryTop">
          <div id="summaryPie1" class="summaryPie"></div>
          <div id="summaryPie2" class="summaryPie"></div>
          <div id="summaryPie3" class="summaryPie"></div>
        </div>
        <div class="summaryBottom">
          <div class="summaryBar">
            <div class="summaryTit"></div>
            <div id="summaryBar"></div>
          </div>
          <div class="summaryLine">
            <div class="summaryTit"></div>
            <div id="summaryLine"></div>
          </div>
        </div>
      </div>
    </div>
    <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <script src="https://www.jq22.com/jquery/echarts-4.2.1.min.js"></script>
    <script src="js/wodry.min.js"></script>
    <script src="js/fontscroll.js"></script>
    <script src="js/survey.js"></script>
    <script>
      $("#chart3").on("click", function () {
        $(".filterbg").show();
        $(".popup").show();
        $(".popup").width("3px");
        $(".popup").animate(
          {
            height: "76%",
          },
          400,
          function () {
            $(".popup").animate(
              {
                width: "82%",
              },
              400
            );
          }
        );
        setTimeout(summaryShow, 800);
      });
      $(".popupClose").on("click", function () {
        $(".popupClose").css("display", "none");
        $(".summary").hide();
        $(".popup").animate(
          {
            width: "3px",
          },
          400,
          function () {
            $(".popup").animate(
              {
                height: 0,
              },
              400
            );
          }
        );
        setTimeout(summaryHide, 800);
      });

      function summaryShow() {
        $(".popupClose").css("display", "block");
        $(".summary").show();
        setSummary();
      }

      function summaryHide() {
        $(".filterbg").hide();
        $(".popup").hide();
        $(".popup").width(0);
      }
    </script>
  </body>
</html>
